import { NSpace } from 'naive-ui'
import Reload from './reload.tsx'
import Setting from './setting.tsx'
import { useProTableState } from '~/components/pro-table/context.ts'

/**
 * @ClassName: index
 * @Description: // toolbar最基础的功能部分
 * @Author: Ellwood
 * @CreateDate: 2024/2/26 - 8:22
 * @Version: V1.0.0
 */
const toolbar = defineComponent({
  name: 'Toolbar',
  setup() {
    const { options } = useProTableState()

    return () => {
      const renderToolbar = () => {
        if (options.value === false)
          return null

        return (
          <NSpace>
            {options.value?.reload && <Reload />}
            {options.value?.setting && <Setting />}
          </NSpace>
        )
      }
      return (
        <div class="flex justify-between pb-16px">
          <div class="font-500 text-16px">高级表格</div>
          <div class="flex items-center">
            {renderToolbar()}
          </div>
        </div>
      )
    }
  },
})
export default toolbar
